<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员注册</title>
    <style>
      /* 清除默认样式 */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        /* 给body整体设置 */
        body {
            background-color: #f5f5f5;
            padding: 20px;
            color: #333;
        }

        /* 给表单整体设置 */
        .container {
            max-width: 600px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        /* 设置标题 */
        h1 {
            color: #1e88e5;
            text-align: center;
            margin-bottom: 25px;
        }
        
        /* 表单组间距，让界面更美观 */
        .form-group {
            margin-bottom: 20px;
        }
        
        /* 标签样式 */
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }
        
        /* 所有输入框统一形式，美化界面 */
        input[type="text"], 
        input[type="password"], 
        input[type="email"],
        input[type="number"],
        select,
        textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        
        /* 必填项 */
        .required::after {
            content: "必填";
            color: #e53935;
            font-size: 12px;
            margin-left: 8px;
        }
        
        /* 验证码容器布局 */
        .captcha-container {
            display: flex;
            align-items: center;
        }
        

        .captcha-container input {
            flex: 1;
            margin-right: 10px;
        }
        
        /* 验证码显示样式 */
        .captcha-img {
            background-color: #f0f0f0;
            padding: 5px 10px;
            border-radius: 4px;
            font-family: monospace;
            font-weight: bold;
            letter-spacing: 2px;
            cursor: pointer;
            user-select: none;
            border: 1px solid #ddd;
            height: 42px;
            display: flex;
            align-items: center;
        }
        
        /* 单选按钮组样式设置 */
        .radio-group {
            display: flex;
            gap: 20px;
        }
        
        .radio-group label {
            font-weight: normal;
            display: flex;
            align-items: center;
        }
        
        .radio-group input {
            margin-right: 5px;
        }
        
        /* 生日输入区域布局 */
        .birthday-inputs {
            display: flex;
            gap: 10px;
        }
        
        .birthday-inputs input {
            flex: 1;
        }
        
        /* 月薪滑块容器样式 */
        .salary-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .salary-container input {
            flex: 1;
        }
        
        /* 月薪显示样式 */
        .salary-value {
            min-width: 60px;
            text-align: center;
            font-weight: bold;
        }
        
        /* 复选框样式 */
        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .checkbox-group label {
            font-weight: normal;
            display: flex;
            align-items: center;
        }
        
        .checkbox-group input {
            margin-right: 5px;
        }
        
        /* 文件上传样式 */
        .file-upload {
            border: 1px dashed #ddd;
            padding: 15px;
            text-align: center;
            border-radius: 4px;
            background-color: #fafafa;
        }
        
        .file-upload:hover {
            background-color: #f0f0f0;
        }
        
        /* 图片预览容器 */
        .preview-container {
            margin-top: 10px;
            text-align: center;
            display: none;
        }
        
        .preview-container img {
            max-width: 150px;
            max-height: 150px;
            border-radius: 4px;
            border: 1px solid #ddd;
        }
        
        /* 按钮 */
        .button-group {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 25px;
        }
        
        button {
            padding: 12px 25px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        button[type="submit"] {
            background-color: #1e88e5;
            color: white;
        }
        
        button[type="submit"]:hover {
            background-color: #1976d2;
        }
        
        button[type="reset"] {
            background-color: #e0e0e0;
            color: #333;
        }
        
        button[type="reset"]:hover {
            background-color: #d0d0d0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎注册会员</h1>
        <form id="registrationForm">
            <!-- 手机号码 -->
            <div class="form-group">
                <label for="phone" class="required">手机号码:</label><input type="text" id="phone" name="phone" placeholder="11位手机号" required pattern="[0-9]{11}">
            </div>
            
            <!-- 创建密码 -->
            <div class="form-group">
                <label for="password" class="required">创建密码:</label>
                <input type="password" id="password" name="password" placeholder="8位密码" required pattern=".{8,}">
            </div>
            
            <!-- 注册邮箱 -->
            <div class="form-group">
                <label for="email" class="required">注册邮箱:</label>
                <input type="email" id="email" name="email" placeholder="请输入邮箱" required>
            </div>
            
            <!-- 验证码 -->
            <div class="form-group">
                <label for="captcha">验证码:</label>
                <div class="captcha-container">
                    <input type="text" id="captcha" name="captcha" placeholder="请输入验证码">
                    <div class="captcha-img" id="captchaImage">UJFg</div>
                </div>
            </div>
            
            <!-- 性别 -->
            <div class="form-group">
                <label>性别:</label>
                <div class="radio-group">
                    <label><input type="radio" name="gender" value="male" checked> 男</label>
                    <label><input type="radio" name="gender" value="female"> 女</label>
                </div>
            </div>
            
            <!-- 生日 -->
            <div class="form-group">
                <label for="birthday">生日:</label>
                <div class="birthday-inputs">
                    <input type="text" id="year" placeholder="年">
                    <input type="text" id="month" placeholder="月">
                    <input type="text" id="day" placeholder="日">
                </div>
            </div>
            
            <!-- 年龄 -->
            <div class="form-group">
                <label for="age">年龄:</label>
                <input type="number" id="age" name="age" min="0">
            </div>
            
            <!-- 籍贯 -->
            <div class="form-group">
                <label for="hometown">籍贯:</label>
                <select id="hometown" name="hometown">
                    <option value="湖北武汉" selected>湖北省 武汉</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="广东广州">广东省 广州</option>
                    <option value="江苏南京">江苏省 南京</option>
                    <option value="浙江杭州">浙江省 杭州</option>
                </select>
            </div>
            
            <!-- 学历 -->
            <div class="form-group">
                <label for="education">个人学历:</label>
                <select id="education" name="education">
                    <option value="本科" selected>本科</option>
                    <option value="高中">高中</option>
                    <option value="大专">大专</option>
                    <option value="硕士">硕士</option>
                    <option value="博士">博士</option>
                </select>
            </div>
            
            <!-- 月薪 -->
            <div class="form-group">
                <label for="salary">月薪:</label>
                <div class="salary-container">
                    <input type="range" id="salary" name="salary" min="2000" max="20000" step="1000" value="5000">
                    <div class="salary-value" id="salaryValue">5000</div>
                </div>
            </div>
            
            <!-- 爱好 -->
            <div class="form-group">
                <label>个人爱好:</label>
                <div class="checkbox-group">
                    <label><input type="checkbox" name="hobby" value="singing"> 唱歌</label>
                    <label><input type="checkbox" name="hobby" value="running"> 跑步</label>
                    <label><input type="checkbox" name="hobby" value="swimming"> 游泳</label>
                </div>
            </div>
            
            <!-- 个人照片 -->
            <div class="form-group">
                <label for="photo">个人照片:</label>
                <div class="file-upload" id="fileUpload">
                    <input type="file" id="photo" name="photo" accept="image/*" style="display: none;">
                    <span>选择文件</span>
                    <span id="fileName">未选择任何文件</span>
                </div>
                <div class="preview-container" id="previewContainer">
                    <img id="previewImage" src="#" alt="图片预览">
                </div>
            </div>
            
            <!-- 个人简介 -->
            <div class="form-group">
                <label for="bio">个人简介:</label>
                <textarea id="bio" name="bio" rows="4"></textarea>
            </div>
            
            <!-- 按钮 -->
            <div class="button-group">
                <button type="submit">提交</button>
                <button type="reset">重填</button>
            </div>
        </form>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 验证码生成和刷新功能
            function generateCaptcha() {
                const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
                let captcha = '';
                for (let i = 0; i < 4; i++) {
                    captcha += chars.charAt(Math.floor(Math.random() * chars.length));
                }
                return captcha;
            }
            
            const captchaImage = document.getElementById('captchaImage');
            let currentCaptcha = generateCaptcha();
            captchaImage.textContent = currentCaptcha;
            
            captchaImage.addEventListener('click', function() {
                currentCaptcha = generateCaptcha();
                captchaImage.textContent = currentCaptcha;
            });
            
            // 月薪滑块值显示
            const salarySlider = document.getElementById('salary');
            const salaryValue = document.getElementById('salaryValue');
            
            salarySlider.addEventListener('input', function() {
                salaryValue.textContent = this.value;
            });
            
            // 文件上传和预览功能
            const fileInput = document.getElementById('photo');
            const fileUpload = document.getElementById('fileUpload');
            const fileName = document.getElementById('fileName');
            const previewContainer = document.getElementById('previewContainer');
            const previewImage = document.getElementById('previewImage');
            
            fileUpload.addEventListener('click', function() {
                fileInput.click();
            });
            
            fileInput.addEventListener('change', function() {
                if (this.files && this.files[0]) {
                    fileName.textContent = this.files[0].name;
                    
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        previewImage.src = e.target.result;
                        previewContainer.style.display = 'block';
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            });
            
            // 表单提交验证
            document.getElementById('registrationForm').addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 验证手机号
                const phone = document.getElementById('phone').value;
                if (!/^[0-9]{11}$/.test(phone)) {
                    alert('请输入有效的11位手机号码');
                    return;
                }
                
                // 验证密码
                const password = document.getElementById('password').value;
                if (password.length < 8) {
                    alert('密码长度至少为8位');
                    return;
                }
                
                // 验证邮箱
                const email = document.getElementById('email').value;
                if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                    alert('请输入有效的邮箱地址');
                    return;
                }
                
                // 验证验证码
                const enteredCaptcha = document.getElementById('captcha').value;
                if (enteredCaptcha.toUpperCase() !== currentCaptcha.toUpperCase()) {
                    alert('验证码错误，请重新输入');
                    currentCaptcha = generateCaptcha();
                    captchaImage.textContent = currentCaptcha;
                    return;
                }
                
                alert('注册信息提交成功！');
                // 在实际应用中，这里应该将数据发送到服务器
            });
        });
    </script>
</body>
</html>